<!DOCTYPE html>

<head>
	<meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8" />
	<title>Yobot</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
	<style>
		footer{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
    body {
			margin:0;
			text-align:center;
		}

		h1 {
			font-family: 'Lato', sans-serif;
			font-weight:300;
			letter-spacing: 2px;
			font-size:48px;
		}

		p {
			font-family: 'Lato', sans-serif;
			letter-spacing: 1px;
			font-size:16px;
		}

		.header {
			position:relative;
			text-align:center;
			background: linear-gradient(60deg,rgba(43,122,205,1) 0%,rgba(0,90,180,1) 100%);
			color:white;
		}

		.inner-header {
			height:170px;
			width:100%;
			margin: 0;
			padding: 0;
		}

		.flex { /*Flexbox for containers*/
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.waves {
			position:relative;
			width: 100%;
			height:40px;
			margin-bottom:-7px; /*Fix for safari gap*/
			min-height:60px;
			max-height:120px;
		}

		.content {
			position:relative;
			height:20vh;
			text-align:center;
			background-color: white;
		}

		/* Animation */

		.parallax > use {
			animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
		}
		.parallax > use:nth-child(1) {
			animation-delay: -2s;
			animation-duration: 7s;
		}
		.parallax > use:nth-child(2) {
			animation-delay: -3s;
			animation-duration: 10s;
		}
		.parallax > use:nth-child(3) {
			animation-delay: -4s;
			animation-duration: 13s;
		}
		.parallax > use:nth-child(4) {
			animation-delay: -5s;
			animation-duration: 20s;
		}
		@keyframes move-forever {
			0% {
			 transform: translate3d(-90px,0,0);
			}
			100% { 
				transform: translate3d(85px,0,0);
			}
		}
		/*Shrinking for mobile*/
		@media (max-width: 768px) {
			.waves {
				height:40px;
				min-height:40px;
			}
			.content {
				height:30vh;
			}
			h1 {
				font-size:24px;
			}
		}
    
    </style>
</head>

<body>
	<div class="header">

		<div class="inner-header flex">
			<h1>Yobot Homepage</h1>
		</div>
		<p>—{{ verinfo | replace("\n", "<br>")  }}—</p>
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"
		 preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
		</svg>
	</div>

	<div id="app">
		<a href="{{ url_for('yobot_login') }}">
			<el-button type="primary" style="margin: 5%;height: 80px;width: 200px;">登录</el-button>
		</a>
		<br>
		<a href="{{ url_for('yobot_about') }}">
			<el-button size="mini" style="width: 200px;">关于</el-button>
		</a>
	</div>
    <el-footer style="position: fixed;bottom: -10px;left: 50%;transform: translate(-50%, -50%);background-color: #66b1ff;color: #ffffff;
width: 100%;font-size:15px;">
        {% if show_icp -%}
        <a target="_blank" href="http://beian.miit.gov.cn/" style="text-decoration:none;color: #ffffff;">{{ icp_info }}</a>
        &nbsp;
        {% if gongan_info -%}
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="text-decoration:none;color: #ffffff;"> 
            <img src="{{ url_for('yobot_static', filename='gongan.png') }}">
            {{ gongan_info }}
        </a>
        &nbsp;
        {% endif -%}
        {% endif -%}
        powered by <a href="https://github.com/pcrbot/yobot" style="text-decoration:none;color: #ffffff;">yobot</a>
    </el-footer>
</body>
<script>
	new Vue().$mount('#app');
</script>

</html>
